/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { View, TextInput, Text, ScrollView, Clipboard } from 'react-native';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import Picker from 'react-native-picker';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PDatePicker, PCustumTabBar } from '../../../library/comp';
import { Dialog, Http, PageBase } from '../../../library/func';
import Design from '../../../design';
import Config from '../../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class ServiceVisitor extends PageBase {
	constructor(props) {
		super(props);
		this.state = {
			// 过期时间选择器 当前选择值
			expireTime:'选择时间',

			//使用次数
			usecount:null,
			//使用码
			usecode:null,
			//房屋信息
			myhouse:{
				set_name:"保定珑城花园小区"
			}
		}
	}
	
	/************************************************************************************ Life */
    /**
     * didMount
     */
    componentDidMount(){
        // SplashScreen.hide();
        // HttpTemp.get({
        //     url:"CPage/location/subdistrict.php",
        //     success:(res) => {
        //         let data = res.data;
        //         this.setState({
		// 			myhouse:data
        //         })
        //     }
        // })

	}

	showPicker = e => {
		Picker.init({
			pickerData: this.state.expireData,
			selectedValue: [59],
			onPickerConfirm: data => {
				this.state.expire = data;
				this.setState({
					
				})
			},
			onPickerCancel: data => {
				console.log(data);
			},
			onPickerSelect: data => {
				console.log(data);
			}
		});
		Picker.show();
	} 

	/************************************************************************************ Func */
	/**
	 * 访客通行信息填写完成后的提交操作
	 */
	getusecode = ()=>{

		let timechuo = 0;
		if(this.state.expireTime == '选择时间'){
			Dialog.text('请选择过期时间',1);
			return;
		}else{
			timechuo = new Date(this.state.timeout).getTime()/1000
		}
		if(this.state.usecount == null){
			Dialog.text('请填写使用次数',1)
			return;
		}
		
        // HttpTemp.post({
		// 	url:"/CPage/guest/logic/gencode.php",
		// 	data:{
		// 		set_use_times:parseInt(this.state.usecount),
		// 		time_over:timechuo,
		// 	},
        //     success:(res) => {
		// 		if(res.code == 0){
		// 			let data = res.data;
		// 			this.setState({
		// 				usecode:data.set_code
		// 			})
		// 			Dialog.text('使用码已生成', 1)
	
		// 		}else{
		// 			Dialog.text(res.msg, 1)

		// 		}

        //     }
        // })
	}

	// 绑定input值
	changeInput = ( key, value ) => {
		this.setState({
			[key]:value
		})
	}
	
	// 复制功能
    async _setContent() {
        Clipboard.setString(this.state.usecode);
        Dialog.text('复制成功')
	}
	// 获取剪贴板内容
	async _getContent() {
		let text = await Clipboard.getString();
        Dialog.text(text)
    }
	

	/************************************************************************************ Render */
	render() {

		var myDate = new Date();

		
		return (
			<CPage bg='#efeff4'>

				<CFull f='1' bg='#efeff4' mt='96'>
					<ScrollableTabView
						tabBarActiveTextColor='#26c75e'
						style={{justifyContent:'center',backgroundColor:'#efeff4'}}
						tabBarUnderlineStyle={{backgroundColor:'#26c75e',width:'16%',left:'17%',height:2}}
						initialPage={0}
    					renderTabBar={(e) => <PCustumTabBar style={{height:30,borderBottomColor:'transparent',borderBottomWidth:0,backgroundColor:'#fff',paddingTop:10}} ></PCustumTabBar>}
					>

						{/* 小区门禁 */}
						<CColumn tabLabel='小区门禁' mx='60' ra='5' f='0' h='500' mt='40' style={{width:Config.map.screen.width-60}} >
							<CColumn pa='30' pb='0' mb='111' bg='#fff' y='top'>

								{/* 选择小区 */}
								<CRow mt='15' bb='2 #f0f0f0' pb='20' h='50' lh='50' f='0'>
									<CHand f='4' y='center'>
										<CIcon width="16" height="16" color="#999" icon={ Design.icon["index-location"] } df></CIcon>
										<CText size='26' color='#5e5e5e' f='1'> 保定珑城花园小区</CText>
										{/* <CIcon width="16" height="16" color="#999" icon={ Design.icon["make-right"] }></CIcon> */}
									</CHand>
								</CRow>

								{/* 过期时间 */}
								<CRow bb='2 #f0f0f0' py='20' h='80' y='center' f='0'>
									<CText color='#797979' size='26' h='60' lh='60' w='135' df>过期时间</CText>
									{/* <PDatePicker type='''' cback={(value)=>this.setState({expire:value})} style={{flex:1}}></PDatePicker> */}
									<CHand f='1' x='right'>
										<CText color='#333' size='26' mr='20'>今天</CText>
										{/* <PDatePicker type='date' cback={(value)=>this.setS
										tate({expireDate:value})}><CText mt='20' color='#333' mr='10'>{this.state.expireDate}</CText></PDatePicker> */}
										<PDatePicker type='time' cback={(value)=>this.setState({expireTime:value})}><CText color='#333' size='26'>{this.state.expireTime}</CText></PDatePicker>
									</CHand>
								</CRow>

								{/* 输入使用码次数 */}
								<CRow bb='2 #f0f0f0' py='20' h='80' y='center' f='0'>
									<CText color='#797979' size='26' h='60' lh='60' w='135' df>使用次数</CText>
									<TextInput
										underlineColorAndroid='transparent'
										style={{paddingTop:0,paddingBottom:0,flex:1}}
										value={this.state.usecount}
										onChangeText={value=>this.changeInput('usecount',value)}
									/>
								</CRow>

								{/* 使用码 */}
								<CRow bb='2 #f0f0f0' py='20' h='80' y='center' f='0'>
									<CText color='#797979' size='26' h='60' lh='60' w='135' df>使用码</CText>
									<CText f='1' h='60' lh='80'>{this.state.usecode}</CText>
									{/* <TextInput
										underlineColorAndroid='transparent'
										value={this.state.usecode}
										onChangeText={value=>this.changeInput('usecode',value)}
										style={{paddingTop:0,paddingBottom:0,flex:1}}
									/> */}
									{
										this.state.usecode != null ? (
											<CHand bg='#26c75e' py='5' px='10' onPress={e=>this._setContent(this)}><CText size='24' color='#fff'>复制</CText></CHand>
										) : (
											<CHand bg='#c9c9c9' py='5' px='10'><CText size='24' color='#fff'>复制</CText></CHand>
										)
									}
									
								</CRow>

							</CColumn>

							{/* 提交 */}
							<CColumn abs bottom='0' style={{width:'100%'}} >
								<CButton {...Design.global.commonButton} py='15' size='28' onPress={e=>this.getusecode()}>提交</CButton>
							</CColumn>
						</CColumn>

						{/* 访客车辆 */}
						<CHand tabLabel='访客车辆' bg='#fff' mx='60' h='500' mt='40' x='center' pt='30' style={{borderTopLeftRadius:2,borderTopRightRadius:2}}><CText color='#666'>暂未开启此功能</CText></CHand>
						
					</ScrollableTabView>
				</CFull>

				{/* PHeader */}
				<PHeader nav={this.nav}>访客通行</PHeader>
			</CPage>
		);
	}
}
